<template>
  <comcard>
    <div slot="com_title">
      <!-- 表单 -->
      <el-form label-width="80px" :model="currentSize" :inline="true">
        <el-form-item label="订单号：">
          <el-input v-model="currentSize.orderNo" placeholder="订单号"></el-input>
        </el-form-item>
        <el-form-item label="收货人：">
          <el-input v-model="currentSize.consignee" placeholder="收货人"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="currentSize.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select  v-model="currentSize.orderState">
            <el-option label="派送中" value="派送中"></el-option>
            <el-option label="已受理" value="已受理"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
 <!-- 时间选择器 -->
      <template>
        <span>选择时间：</span
        ><el-date-picker
      v-model="currentSize.adate"
      type="datetimerange"
      align="right"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['12:00:00', '08:00:00']">
    </el-date-picker>
      </template>
        </el-form-item>
         <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
      </el-form-item>
      </el-form>
     
     
    </div>
    <div slot="com_content">
      <template>
        <el-table :data="tableObj">
          <el-table-column prop="orderNo" label="订单号" width="180">
          </el-table-column>
          <el-table-column  label="下单时间" width="180">
            <template #default="{row}">
              {{row.orderTime | timeMF}}
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号"> </el-table-column>
          <el-table-column prop="consignee" label="收货人"> </el-table-column>
          <el-table-column prop="deliverAddress" label="配送地址">
          </el-table-column>
          <el-table-column  label="送达时间">
            <template #default="{row}">
              {{row.deliveryTime | timeMF}}
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="用户备注"> </el-table-column>
          <el-table-column prop="orderAmount" label="订单金额">
          </el-table-column>
          <el-table-column prop="orderState" label="订单状态">
          </el-table-column>
          <el-table-column label="操作" width="100px" fixed="right">
            <template #default="{ row }" >
              <el-button type="text" @click="godetail(row.id)" 
                >查看</el-button
              >
              <el-button type="text" @click="update(row.id)" 
                >修改</el-button
              >
              <el-button type="text" @click="del(row.id)" 
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentSize.currentPage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="currentSize.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </comcard>
</template>

<script>
import { api_ordlist } from "../../api/order";
import Comcard from "../../components/comCard";
export default {
  components: {
    Comcard,
  },
  data() {
    return {
      total: 0,
      tableObj: [],
      currentSize: {
        currentPage: 1,
        pageSize: 2,
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        adate:[],
        date: [],
      },
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    // 点击修改按钮触发函数
    update(id){
      this.$router.push({
        path:"/order/update",
        // 通过query传参
        query:{
          id
        }
      })
    },
    // 点击查看按钮触发函数
    godetail(id){
      this.$router.push(`/order/detail?id=${id}`);
    },
    handleSizeChange(val) {
      this.currentSize.pageSize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.currentSize.currentPage = val;
      this.query();
    },
    async query() {
      this.currentSize.date=JSON.stringify(this.currentSize.adate)
      let rst = await api_ordlist(this.currentSize);
      console.log(rst);
      let { total, data } = rst;

      this.total = total;
            // 就是把接口的数据赋值给tableObj，
      // 此时tableObj里面就是数据库所有数据，之后用接口里面的响应参数用prop渲染到表单
      this.tableObj = data;
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  display: flex;
}
</style>
